<template>
    <div style='position:relative;'>
        <div style="width:100%;z-index:1;">
            <div>
                <Card style="width:12%;float:left;height:153px;">
                  <Button :type="btntype" style="width:100%;height:121px;" @click="start_stop_trans">{{btntext}}</Button>
                </Card>
                <Card style="width:20%;float:left;margin-left:2%;">
                    <p class="title">当日利润(当日零点开始)</p>
                    <p><label class="label_ts">利润额(USD)：</label>{{daylr.lreusd}}</p>
                    <p><label class="label_ts">利润额(CNY)：</label>{{daylr.lrecny}}</p>
                    <p>
                        <label class="label_ts">交易利润率：
                        <Icon type="help-circled" style="color:#66B1ff;" title="此处利润率表示在该时间段内所有交易的平均利润率 = 总利润额度 / 总买入额度"></Icon>
                        </label>{{daylr.jylrl}}%
                    </p>
                    <p>
                        <label class="label_ts">资金收益率：
                        <Icon type="help-circled" style="color:#66B1ff;" title="此处收益表示在该时间段内所有交易的资金收益率 = 总利润额度 / 总资产"></Icon>
                        </label>{{daylr.zjsyl}}%
                    </p>
                </Card>
                <Card style="width:20%;float:left;margin-left:2%;">
                    <p class="title">过去7天利润</p>

                    <p><label class="label_ts">利润额(USD)：</label>{{day_7lr.lreusd}}</p>
                    <p><label class="label_ts">利润额(CNY)：</label>{{day_7lr.lrecny}}</p>
                    <p>
                        <label class="label_ts">交易利润率：
                        <Icon type="help-circled" style="color:#66B1ff;" title="此处利润率表示在该时间段内所有交易的平均利润率 = 总利润额度 / 总买入额度"></Icon>
                        </label>{{day_7lr.jylrl}}%
                    </p>
                    <p>
                        <label class="label_ts">资金收益率：
                        <Icon type="help-circled" style="color:#66B1ff;" title="此处收益表示在该时间段内所有交易的资金收益率 = 总利润额度 / 总资产"></Icon>
                        </label>{{day_7lr.zjsyl}}%
                    </p>
                </Card>
                <Card style="width:20%;float:left;margin-left:2%;">
                    <p class="title">过去30天利润</p>

                    <p><label class="label_ts">利润额(USD)：</label>{{day_30lr.lreusd}}</p>
                    <p><label class="label_ts">利润额(CNY)：</label>{{day_30lr.lrecny}}</p>
                    <p>
                        <label class="label_ts">交易利润率：
                        <Icon type="help-circled" style="color:#66B1ff;" title="此处利润率表示在该时间段内所有交易的平均利润率 = 总利润额度 / 总买入额度"></Icon>
                        </label>{{day_30lr.jylrl}}%
                    </p>
                    <p>
                        <label class="label_ts">资金收益率：
                        <Icon type="help-circled" style="color:#66B1ff;" title="此处收益表示在该时间段内所有交易的资金收益率 = 总利润额度 / 总资产"></Icon>
                        </label>{{day_30lr.zjsyl}}%
                    </p>
                </Card>
                <Card style="width:20%;float:left;margin-left:2%;">
                    <p class="title">全部利润</p>

                    <p><label class="label_ts">利润额(USD)：</label>{{alllr.lreusd}}</p>
                    <p><label class="label_ts">利润额(CNY)：</label>{{alllr.lrecny}}</p>
                    <p>
                        <label class="label_ts">交易利润率：
                        <Icon type="help-circled" style="color:#66B1ff;" title="此处利润率表示在该时间段内所有交易的平均利润率 = 总利润额度 / 总买入额度"></Icon>
                        </label>{{alllr.jylrl}}%
                    </p>
                    <p>
                        <label class="label_ts">资金收益率：
                        <Icon type="help-circled" style="color:#66B1ff;" title="此处收益表示在该时间段内所有交易的资金收益率 = 总利润额度 / 总资产"></Icon>
                        </label>{{alllr.zjsyl}}%
                    </p>
                </Card>
            </div>
        </div>
        
        <div style="position:absolute;left:-260px;top:300px;width:250px;">
            <Table :columns="columns" :data="data"></Table>
        </div>
        <div style="width:100%;float:right;margin-top:15px;">
            <Card style="width:100%;">
                <p slot="title">
                    对冲交易记录
                </p>
				<!--<a href="#" slot="extra" @click.prevent="changeLimit">
					<Icon type="gear-b"></Icon>
					利润设置
				</a>-->
                <div>
                    <Form :label-width="70" inline>
                        <FormItem label="买入市场:">
                            <Select v-model="search.mrsc">
                                <Option v-for="(item,key) in mrsclist" :value="item" :key="key">{{item}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="卖出市场:">
                            <Select v-model="search.mcsc">
                                <Option v-for="(item,key) in mrsclist" :value="item" :key="key">{{item}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="币种:">
                            <Select v-model="search.bz">
                                <Option v-for="(item,key) in bzlist" :value="item" :key="key">{{item}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="计价币种:">
                            <Select v-model="search.jjhb">
                                <Option v-for="(item,key) in jjbzlist" :value="item" :key="key">{{item}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="补单:">
                            <Select v-model="search.bd">
                                <Option v-for="(item,key) in bdlist" :value="item" :key="key">{{item}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="订单状态:">
                            <Select v-model="search.ddzt">
                                <Option v-for="(item,key) in ddztlist" :value="item" :key="key">{{item}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem label="盈亏:">
                            <Select v-model="search.yk">
                                <Option v-for="(item,key) in bzlist" :value="item" :key="key">{{item}}</Option>
                            </Select>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" icon="ios-search" @click = "searchdata">查询</Button>
                            <Button type="ghost" icon="ios-refresh" style="margin-left: 8px" @click="reset">重置</Button>
                        </FormItem>
                    </Form>
                     <Table border :columns="columns1" :data="data1"></Table>
                     <Page :total="total" :current="currenPage" style="text-align:right;margin-top:15px;" @on-change="changePage"></Page>
                </div>
            </Card>
        </div>
    </div>
</template>
<script>
import detail from "./detail.vue";
import { ipcRenderer } from "electron";
import { setInterval } from "timers";
export default {
  data() {
    return {
	  jjbzlist:['全部','eth','usd','usdt','btc'],
      getdatatype: "",
      transstatus: 0,
      btntype: "primary",
      btntext: "开始交易",
      currenPage: 1,
      total: 1,
      mrsclist: ['全部','HUOBI', 'BITTREX','GATEIO','OKCOIN','BINANCE'],
      bzlist: ["全部"],
      bdlist: ["全部", "是", "否"],
      lrllist: [">=", "<="],
      ddztlist: [
        "全部",
        "已完成",
        "交易中",
        "部分成交",
        "取消",
        "失败",
        "异常"
      ],
      columns1: [
        {
          type: "expand",
          width: 50,
          render: (h, params) => {
            return h(detail, {
              props: {
                row: params.row.detaildata
              },
			  on:{
				increment:(data)=>{
					params.row.detaildata[data._index] = data;
					console.log(params)
				}
			  }
            });
          }
        },
        {
          title: "币种",
          key: "bz"
        },
        {
          title: "买入市场",
          key: "mrsc"
        },
        {
          title: "卖出市场",
          key: "mcsc"
        },
        {
          title: "数量",
          key: "num"
        },
        {
          title: "预设利润率(%)",
          render: (h, params) => {
            let col = "";
            if (params.row.yslrl < 0) {
              col = "#ed3f14";
            }
            return h("div", [
              h(
                "span",
                {
                  style: {
                    color: col
                  }
                },
                params.row.yslrl
              )
            ]);
          }
        },
        {
          title: "期望利润率(%)",
          render: (h, params) => {
            let col = "";
            if (params.row.qwlrl < 0) {
              col = "#ed3f14";
            }
            return h("div", [
              h(
                "span",
                {
                  style: {
                    color: col
                  }
                },
                params.row.qwlrl
              )
            ]);
          }
        },
        {
          title: "实际利润率(%)",
          render: (h, params) => {
            let col = "";
            if (params.row.sjlrl < 0) {
              col = "#ed3f14";
            }
            return h("div", [
              h(
                "span",
                {
                  style: {
                    color: col
                  }
                },
                params.row.sjlrl
              )
            ]);
          }
        },
        {
          title: "利润额(美元)",
          render: (h, params) => {
            let col = "";
            if (params.row.lre < 0) {
              col = "#ed3f14";
            }
            return h("div", [
              h(
                "span",
                {
                  style: {
                    color: col
                  }
                },
                params.row.lre
              )
            ]);
          }
        },
        {
          title: "订单状态",
          render: (h, params) => {
            let fontcolor = "";
            if (params.row.status == "已完成") {
              fontcolor = "green";
            }
            if (params.row.status == "未完成") {
              fontcolor = "#ed3f14";
            }
            return h("div", [
              h(
                "span",
                {
                  style: {
                    color: fontcolor
                  }
                },
                params.row.status
              )
            ]);
          }
        },
        {
          title: "时间",
          key: "time"
        },
        {
          title: "操作",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    cursor: "pointer"
                  },
                  on: {
                    click: () => {
                      this.$Message.info("点击查看详情");
                    }
                  }
                },
                "查看明细"
              )
            ]);
          }
        }
      ],
      data1: [],
      daylr: {},
      day_7lr: {},
      day_30lr: {},
      alllr: {},
      search: {
        mrsc: "全部",
        mcsc: "全部",
        bz: "全部",
        jjhb: "全部",
        bd: "全部",
        ddzt: "部分成交",
        yk: "全部",
        lrl: "",
        lrlnum: 0
      },
      columns: [
        {
          title: "市场",
          key: "market"
        },
        {
          title: "状态",
          render: (h, params) => {
            let bck = "";
            let title = "";
            if (params.row.status == "1") {
              bck = "#2d8cf0";
              title = "已完成";
            } else {
              bck = "#f90";
              title = "未完成";
            }
            return h("div", [
              h(
                "div",
                {
                  style: {
                    background: bck,
                    borderRadius: "10px",
                    width: "10px",
                    height: "10px",
                    display: "inline-block"
                  },
                  domProps: {
                    title: title
                  }
                },
                ""
              )
            ]);
          }
        },
        {
          title: "操作",
          render: (h, params) => {
            let text = "暂停";
			let type = 'primary';
            if (params.row.status == "0") {
              text = "开始";
			  type='primary';
            }
            if (params.row.status == "1") {
              text = "暂停";
			  type = 'error';
            }
            
			let vm = this;
			return h('Poptip', {
				props: {
					confirm: true,
					title: `您确定要${text}这条交易吗?`,
					transfer: true
				},
				on: {
					'on-ok': () => {
						vm.confirmAction(text,params);
					}
				}
			}, [
				h('span', {
					style: {
						color: "#2d8cf0",
						cursor: "pointer"
					}
				}, text)
			]);
          }
        }
      ],
      data: []
    };
  },
  components: { detail },
  created() {
    this.total = this.data1.length;

    ipcRenderer.on("Transaction_record", (event, message) => {
      console.log(message);
      this.data1 = message.data;
      this.total = message.count;
    });
    this.getMessage("Transaction_record", { page: 1 });
    ipcRenderer.on("Statistics", (event, message) => {
      this.daylr = message.daylr;
      this.day_7lr = message.day_7lr;
      this.day_30lr = message.day_30lr;
      this.alllr = message.alllr;
    });
    this.getMessage("Statistics", "Statistics");

    ipcRenderer.on("table_data", (event, message) => {
      console.log(message);
      this.data = message;
    });
    this.getMessage("table_data", "table_data");

    ipcRenderer.on("toggleTransstatus", (event, message) => {
      console.log(message);
      this.transstatus = message.status;
    });

    ipcRenderer.on("searchData", (event, message) => {
      console.log(message);
      this.data1 = message.data;
      this.total = message.count;
    });

    ipcRenderer.on("open_close_table_list", (event, message) => {
      this.data = message;
      console.log(message);
    });

    setInterval(() => {
      this.refreshData();
    }, 30000);
  },
  methods: {
	changeLimit:function(){
		this.$router.push({name:'hedgingsetting_1'});
	},
    getMessage: function(event, type) {
      ipcRenderer.send(event, type);
    },
    changePage: function(page) {
      this.currenPage = page;
      if (this.getdatatype == "search") {
        this.getMessage("searchData", { page: page });
      } else {
        this.getMessage("Transaction_record", { page: page });
      }
    },
    getTransStatus: function() {
      if (this.transstatus == 1) {
        this.btntext = "暂停交易";
        this.btntype = "warning";
      }
      if (this.transstatus == 0) {
        this.btntext = "开始交易";
        this.btntype = "primary";
      }
    },
    start_stop_trans: function() {
      if (this.transstatus == 1) {
        this.transstatus = 0;
        this.$Message.success("暂停成功");
      } else if (this.transstatus == 0) {
        this.transstatus = 1;
        this.$Message.success("开启成功");
      }
      this.getMessage("toggleTransstatus", this.transstatus);
      this.getTransStatus();
    },
	confirmAction:function(text,params){
		if (text == "暂停") {
			params.row.status = "0";
		  }
		  if (text == "开始") {
			params.row.status = "1";
		  }
		  console.log(params.row);
		  this.getMessage("open_close_table_list", params.row);
	},
    searchdata: function() {
      this.getdatatype = "search";
      this.getMessage("searchData", { page: 1, search: this.search });
    },
    reset: function() {
      this.getdatatype = "";
      this.getMessage("Transaction_record", { page: 1 });
      this.currenPage = 1;
    },
    refreshData: function() {
      this.getMessage("Transaction_record", { page: 1 });
      this.getMessage("Statistics", "Statistics");
      this.getMessage("table_data", "table_data");
    }
  },
  destroyed() {
    ipcRenderer.removeAllListeners("Transaction_record");
    ipcRenderer.removeAllListeners("Statistics");
    ipcRenderer.removeAllListeners("table_data");
    ipcRenderer.removeAllListeners("toggleTransstatus");
    ipcRenderer.removeAllListeners("searchData");
    ipcRenderer.removeAllListeners("open_close_table_list");
  }
};
</script>
<style scoped>
.title {
  font-size: 16px;
  font-weight: 700;
  line-height: 35px;
}
.label_ts {
  width: 110px;
  display: inline-block;
}
p{
  width: 100%;
  overflow: hidden;
  white-space:nowrap; 
  text-overflow:ellipsis;
}
</style>
